<template>
  <div class="navBox">
    <el-aside width="260px" class="vNav">
      <el-menu
        :default-active="$route.path"
        class="vMenu"
        background-color="#3D5F81"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        router
      >
        <img
          src="https://img1.baidu.com/it/u=700918366,3183404250&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=341"
          width="100%"
          height="160px"
          alt=""
        />

        <el-menu-item index="/home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu
          v-for="item in list.menus"
          :key="item.id"
          :index="item.id + ''"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>

          <el-menu-item
            v-for="val in item.children"
            :key="val.id"
            :index="val.url"
            >{{ val.title }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: sessionStorage.getItem("userInfo")
        ? JSON.parse(sessionStorage.getItem("userInfo"))
        : [],
    };
  },
  methods: {},
};
</script>


<style lang='less' scoped>
.navBox {
  .vMenu {
   height: 92vh;
  }
}
</style>